<template>
  <div class="home">

      <el-steps :active="2"  style="width:70%;margin-left:100px" >
      <el-step
        title="试卷基本信息"
       
      ></el-step>
      <el-step
        title="添加试题"
       
      ></el-step>
     <el-step
        title="完成添加"
       
      ></el-step>
     

    </el-steps>
    <div style="margin-top:50px">
        <el-button type="primary" icon="el-icon-check" @click="comitPaper" style="margin-left:20px">确认试卷</el-button>
        <el-button type="primary" icon="el-icon-close" @click="cancelPaper">取消试卷</el-button>
       <el-select v-model="value" placeholder="添加试题" style="margin-left:200px" @change="selectQuesstion">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        
       <el-button type="primary" plain @click="deleckQuesstion">删除试题</el-button>
       <el-button type="primary" plain @click="updateScore">设置分数</el-button>
       <el-button type="primary" plain @click="showDiv">{{showButtonInfo}}</el-button>
      
      
       <br>
       <br>
    <div id="aa" v-if="showDiv1" ref="table" style="height:500px;overflow-y:auto;border:1px solid #ccc;margin:0 auto; width:1000px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"    >
         <h5 style="margin:20px 10px">试题列表</h5>
         <div style="margin-left:50px">

           <el-tag v-if="showSingleTopic">选择题{{PaperObject.scoreList[0].score}}分一个</el-tag>
           <el-tag  v-if="showDoubleTopic">多选题{{PaperObject.scoreList[1].score}}分一个</el-tag>
           
           <el-tag  v-if="showJudgeTopic">判断题{{PaperObject.scoreList[2].score}}分一个</el-tag>
           <el-tag  v-if="showFillTopic">填空题{{PaperObject.scoreList[3].score}}分一个</el-tag>
           <el-tag  v-if="showAnswerTopic">简答题{{PaperObject.scoreList[4].score}}分一个</el-tag>
           <el-tag type="danger">总分{{totalScore}}</el-tag>
         </div>


          <div style="margin-left:780px">是否全选：<input type="checkbox" value="222" v-model="allFlag" @click="selectAll($event)"></div> 
         <div v-for=" (a,index) in totalTopicShow" :key="a" >
        
      
        <el-card class="box-card"  v-if="a.quTypeId == 1">
            <div  v-if="a.quTypeId == 1">
               
                <el-tag>{{index+1}}/{{totalTopicShow.length}}</el-tag><el-tag style="margin-left:10px">单选题</el-tag>{{a.papercontent}}
                
               
                  <!-- <template slot-scope="scope">
                  <h1 v-show="isShow">{{a.questionId}}</h1>
                <el-checkbox @change="deletesByids(scope.$index, scope.row)"/>
                </template> -->

                 <!-- 绑定数据给题目编号后端删除 -->
                  <input type="checkbox" class="checkedDeleteId"  v-model="PaperObject.checkedArr" :value="a.questionId"/>
                <div style="margin-left:100px">
                   
                        <div v-for="(item,index1) in a.answerList" :key="index1">
                          {{item.options}}.{{item.optionContent}}
                        </div>
                </div>
            
          </div>
        </el-card>

     
    
         <el-card class="box-card"  v-if="a.quTypeId == 2">
          
            <div  v-if="a.quTypeId == 2">
                <el-tag>{{index+1}}/{{totalTopicShow.length}}</el-tag><el-tag style="margin-left:10px">多选题</el-tag>{{a.papercontent}}
                 <!-- 绑定数据给题目编号后端删除 -->
                  <input type="checkbox" class="checkedDeleteId"  v-model="PaperObject.checkedArr" :value="a.questionId"/>
                <div style="margin-left:100px"  >
                     <div v-for="(item,index1) in a.answerList" :key="index1">
                          {{item.options}}.{{item.optionContent}}
                        </div>
                </div>
            
          </div>
        </el-card>
       

         
         <el-card class="box-card"  v-if="a.quTypeId == 3">
            
            <div  v-if="a.quTypeId == 3">
             
                <el-tag>{{index+1}}/{{totalTopicShow.length}}</el-tag><el-tag style="margin-left:10px">判断题</el-tag>{{a.papercontent}}
                <!-- 绑定数据给题目编号后端删除 -->
                  <input type="checkbox" class="checkedDeleteId" v-model="PaperObject.checkedArr" :value="a.questionId"/>
            
          </div>
        </el-card>
         <el-card class="box-card"  v-if="a.quTypeId == 4">
           
            <div  v-if="a.quTypeId == 4">
                <el-tag>{{index+1}}/{{totalTopicShow.length}}</el-tag><el-tag style="margin-left:10px">填空题</el-tag>{{a.papercontent}}
                <!-- 绑定数据给题目编号后端删除 -->
                  <input class="checkedDeleteId" type="checkbox" v-model="PaperObject.checkedArr" :value="a.questionId"/>
            
          </div>
        </el-card>
         <el-card class="box-card"  v-if="a.quTypeId == 5">
             <!-- 绑定数据给题目编号后端删除 -->
                  <input type="checkbox" class="checkedDeleteId"  v-model="PaperObject.checkedArr" :value="a.questionId"/>
            <div  v-if="a.quTypeId == 5">
                <el-tag>{{index+1}}/{{totalTopicShow.length}}</el-tag><el-tag style="margin-left:10px">问答题</el-tag>{{a.papercontent}}
                
           
          </div>
        </el-card>
            </div>
    </div>
    </div>
   

    <!-- 添加试题弹出框 -->
    <el-dialog :title="title" :visible.sync="dialogTableVisible">
      <el-input v-model="input" placeholder="请输入内容" style="width:20%"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="queryBytitle">搜索</el-button>
      <el-button type="primary" icon="el-icon-remove" @click="cancelQuery">取消</el-button>
     <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width:100%;overflow-y:auto;height:200px"
    @selection-change="handleSelectionChange">
    
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
   
    <el-table-column
      prop="title"
      label="题目"
      width="300">
      
     <template slot-scope="scope">
        <el-popover trigger="hover" placement="top" v-if="selectTopic" @show="queryAnswer(scope.row)">
          
          
        <div v-for="sanwer in selectAnswer" :key="sanwer">
            {{sanwer.options}}.{{sanwer.optionContent}}
        </div>
         
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.title }}</el-tag>
          </div>
        </el-popover>
        <div slot="reference" class="name-wrapper" v-if="otherTopic">
            <el-tag size="medium">{{ scope.row.title }}</el-tag>
          </div>
      </template>
      
    </el-table-column>
    <el-table-column prop="id" v-if="isShow">
        
    </el-table-column>
  </el-table>
   <el-button type="primary" @click="onSubmit()">确认添加</el-button>
        <el-button type="text" @click="cancel()">取消</el-button>
</el-dialog>

<!-- 设置分数弹出框 -->
 <el-dialog :title="titleScore" :visible.sync="dialogTableScoreVisible" style="width:1200px">
     
        <div v-if="this.showSingleTopic">
        选择题：
        <el-input v-model.number="PaperObject.scoreList[0].score" min="0" type="number" placeholder="请输入选择题分数" style="width:30%" ></el-input><br>
        </div>
        <div v-if="this.showDoubleTopic">
        多选题：
        <el-input v-model.number="PaperObject.scoreList[1].score" min="0" type="number" placeholder="请输入多选题分数" style="width:30%"></el-input><br>
       </div>
        <div v-if="this.showJudgeTopic">
        判断题：
        <el-input v-model.number="PaperObject.scoreList[2].score" min="0" type="number" placeholder="请输入判断题分数" style="width:30%"></el-input><br>
        </div>
        <div v-if="this.showFillTopic">
        填空题：
        <el-input v-model.number="PaperObject.scoreList[3].score" min="0" type="number" placeholder="请输入填空题分数" style="width:30%"></el-input><br>
        </div>
        <div v-if="this.showAnswerTopic">
        简答题：
        <el-input v-model.number="PaperObject.scoreList[4].score" min="0" type="number" placeholder="请输入简答题分数" style="width:30%"></el-input><br>
        
      </div>
      <el-button type="primary" @click="onSetScore()">确认设置</el-button>
        <!-- <el-button type="text" @click="cancel()">取消</el-button> -->
   </el-dialog>
  </div>
  
</template>
<script>
export default {
  data() {
    return {
      count: 5,
      showDiv1:true,
      showButtonInfo:"展开",
      options: [{
          value: '1',
          label: '单选题'
        }, {
          value: '2',
          label: '多选题'
        }, {
          value: '3',
          label: '判断题'
        }, {
          value: '4',
          label: '填空题'
        }, {
          value: '5',
          label: '问答题'
        },{
           label: '请选择题目'
        }],
        value: '',
        dialogTableVisible: false,
        dialogTableScoreVisible: false,//设置分数弹出框
        tableData: [
        ],
        currentRow: null,
        multipleSelection: [],
        totalTopicShow:[],
        title:"",
        isShow:false,
        Question:{
           quesstionIds:[]
        },

        allFlag:'',
        PaperObject:{
          paperid:0,
          // 批量删除
          checkedArr:[],
          scoreList:[
              {topic:1,
            score:1},
              {topic:2,
            score:1
          },
            {topic:3,
            score:1
          }
          ,
          {topic:4,
           score:1
          }
          ,
          {topic:5,
            score:1
          }
           ],
        },
        //选择题
        otherTopic:true,
        selectTopic:true,
        //选择题答案
        selectAnswer:[],
        //弹出框输入框
        input:"",
        titleScore:"设置单个题分数",
      
        totalScore:0,
        showSingleTopic:false,
        showDoubleTopic:false,
        showJudgeTopic:false,
        showFillTopic:false,
        showAnswerTopic:false,
        //题目分数
        singleTopicScore:0,
        doubleTopicScore:0,
        judgeTopicScore:0,
        fillTopicScore:0,
        answerTopicScore:0
    };
  },
  created(){
      
      this.showTopic();
      this.setTotal();
  },

 
  methods: {
    loadMore() {
      this.count += 1;
      console.log("加载...");
    },
    showDiv(){
      
        if(this.showDiv1==true){
        this.showDiv1=false;
        this.showButtonInfo="展开"
        }else{
            this.showDiv1=true;
        this.showButtonInfo="收起"
        }
    },
    // 添加题目到框
    onSubmit(){
        for (let index = 0; index < this.multipleSelection.length; index++) {
            
            this.Question.quesstionIds.push(this.multipleSelection[index].id)
            
        }
        //请求后端
         this.$axios.post(`/api/paperManager/paper1`,this.Question).then(res=>{
      
        if(res.data.code==200){
          this.$message({
                  type: "success",
                  message: res.data.message,
                });
          this.dialogTableVisible=false,
          this. showTopic();
          this.options.label=""
          //location.reload();
        }
        
        }).catch(error => {})
    },
   handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },
      selectQuesstion(){
         
         
            if(this.value==1){
                this.title="单选题"
                this.otherTopic=false,
               this.selectTopic=true
            }else if(this.value==2){
                this.title="多选题"
                this.otherTopic=false,
               this.selectTopic=true
            }else if(this.value==3){
                this.title="判断题"
                this.otherTopic=true,
               this.selectTopic=false
            }
            else if(this.value==4){
                this.title="填空题"
                this.otherTopic=true,
               this.selectTopic=false
            }
            else if(this.value==5){
                this.title="问答题"
                this.otherTopic=true,
               this.selectTopic=false
            }
            // 访问后端接口
            
          
            this.$axios.get(`/api/paperManager/paper/${this.value}`).then(res => {
              this.dialogTableVisible = true;
        
          this.tableData=res.data.data;
            
            this.$refs.multipleTable.clearSelection();
            //清空数组
            this.Question.quesstionIds.splice(0,this.Question.quesstionIds.length)
         
      }).catch(error => {});
      },
      // 查询题目
      showTopic(){
        //请求后端
      
          this.$axios.get(`/api/paperManager/paper`).then(res=>{
          
        this.PaperObject.paperid=res.data.data
        
         //查询题目
              this.$axios.get(`/api/paperManager/paper1/`+this.PaperObject.paperid).then(res=>{
              
                this.totalTopicShow=res.data.data
                console.log(this.totalTopicShow);

                 for(var i=0;i<this.totalTopicShow.length;i++){
             if(this.totalTopicShow[i].quTypeId==1){
               this.showSingleTopic=true;
             
             }else if(this.totalTopicShow[i].quTypeId==2){
               this.showDoubleTopic=true;
               
             }
             else if(this.totalTopicShow[i].quTypeId==3){
               this.showJudgeTopic=true;
              
             }else if(this.totalTopicShow[i].quTypeId==4){
               this.showFillTopic=true;
                
             }else if(this.totalTopicShow[i].quTypeId==5){
               this.showAnswerTopic=true;
               
             }
           }
              }).catch(error => {})
        }).catch(error => {})
        
        
      },
      //设置总分
      setTotal(){
          //设置总分
          this.totalScore=0;
           for(var i=0;i<this.totalTopicShow.length;i++){
             if(this.totalTopicShow[i].quTypeId==1){
               this.showSingleTopic=true;
               this.totalScore+=this.PaperObject.scoreList[0].score
             }else if(this.totalTopicShow[i].quTypeId==2){
               this.showDoubleTopic=true;
                 this.totalScore+=this.PaperObject.scoreList[1].score
             }
             else if(this.totalTopicShow[i].quTypeId==3){
               this.showJudgeTopic=true;
                this.totalScore+=this.PaperObject.scoreList[2].score
             }else if(this.totalTopicShow[i].quTypeId==4){
               this.showFillTopic=true;
                this.totalScore+=this.PaperObject.scoreList[3].score
             }else if(this.totalTopicShow[i].quTypeId==5){
               this.showAnswerTopic=true;
                this.totalScore+=this.PaperObject.scoreList[4].score
             }
           }
      },
      // 批量删除
      deleckQuesstion(){
          
          console.log(this.PaperObject);
          this.$axios.request({
           url:"/api/paperManager/paper",
            method:"delete",
            data:this.PaperObject
          }
          ).then(res=>{
            if(res.data.code==200){
              this.showTopic();
              this.$message({
                  type: "success",
                  message: "删除成功",
                });
            }
          }).catch(error => {})

      },
      selectAll(e){
        // checked全选框的方法
      
         let checked=e.target.checked;
       
         let checkDom=this.$refs.table.getElementsByClassName("checkedDeleteId");
         this.PaperObject.checkedArr.splice(0,this.PaperObject.checkedArr.length)
         if(checked){

           for(var i=0;i<checkDom.length;i++){
             checkDom[i].checked=true;
             if(checkDom[i].checked){
              
               this.PaperObject.checkedArr.push(checkDom[i].value)
             }
           }
         }else{
          for(var i=0;i<checkDom.length;i++){
             checkDom[i].checked=false;
           
           }
         }
      },
      //查询选择题答案
      queryAnswer(row){
        console.log(row.id);
        this.$axios.get('/api/question/findQuestion/'+row.id).then(res=>{
          console.log(res);
          this.selectAnswer=res.data.data
        }).catch(()=>{})
      },
      //模糊查询
      queryBytitle(){
       
       this.$axios.get(`/api/paperManager/paper2/${this.value}/`,{params:{title:this.input}}).then((res)=>{
          this.tableData=res.data.data;
            
            this.$refs.multipleTable.clearSelection();
            //清空数组
            this.Question.quesstionIds.splice(0,this.Question.quesstionIds.length)
       }).catch(()=>{})
      },
      //取消查询
      cancelQuery(){
        this.input=""
        this.selectQuesstion();
      },
      //设置分数弹框
      updateScore(){
        this.dialogTableScoreVisible=true
      },
      //设置分数
      onSetScore(){
        console.log("cc",this.PaperObject.scoreList);
        console.log("dd",this.PaperObject);
        this.$axios.put(`/api/paperManager/paperScore`,this.PaperObject).then((res)=>{
          if(res.data.code==200){
             this.$message({
              type: "success",
              message: "设置分数成功",
            });
           this.setTotal();
            this.dialogTableScoreVisible=false
          }
        }).catch(()=>{})
      },
      //提交试卷
      comitPaper(){
        this.$message({
              type: "success",
              message: "添加试卷成功",
            });
             this.$router.push({path: '/selectExamToPart' })
      },
      //取消试卷
      cancelPaper(){
        this.$axios.delete(`/api/paperManager/paper1`).then((res)=>{
          if(res.data.code==200){
             this.$message({
              type: "success",
              message: "取消试卷成功",
            });
            this.$router.push({path: '/selectExamToPart' })
          }
        }).catch(()=>{})
        
      }
   
  },
};
</script>
<style lang="scss">

.text {
  font-size: 14px;
}
.checkedDeleteId{
  margin-left:800px ;
  
}


.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 900px;
  margin: 0 auto;
  margin-top:20px ;
}
</style>